<template>
  <div style="text-align: center">
    <el-button @click="getTicket" type="success" >获取签名</el-button>
    <el-upload style="display: inline-block"
      :action="targetHost"
      class="upload-demo"
      drag
      :before-upload="beforeUpload"
      :show-file-list="false"
      :on-exceed="outOfLimit"
      :on-progress="onProgress"
      :data="ticket"
      :on-success="onSuccess"
      :on-error="onError"
      name="file">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip" style="color: #ff8400"><strong style="color: #ff0000">提示:</strong>&nbsp;只能上传 <strong>jpg/png</strong> 文件，且不超过 <strong>100kb</strong></div>
    </el-upload>
    <br /> <br /> <br /> <br />
    <div>
      上传成功图片的id:&nbsp;&nbsp;<el-input style="width: 80%" v-model="pictureIds" ></el-input>
    </div>

  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    name: 'addPic',
    data () {
      return {
        targetHost: '',
        ticket: {},
        pictureId: '',
        pictureIds: ''
      }
    },
    methods: {
      outOfLimit () {
        this.$message.error('只能上传一张图片!!')
      },
      // 获取签名
      getTicket () {
        if (this.targetHost !== '') {
          this.$message.error('你已经获取过签名了!')
          return
        }
        axios.get('http://106.54.76.182:12300/picture/policy').then(({data}) => {
          if (data.code === 200) {
            let ticket = data.data
            this.targetHost = ticket.host
            this.pictureId = ticket.pictureId
            this.ticket = {
              OSSAccessKeyId: ticket.accessid,
              policy: ticket.policy,
              signature: ticket.signature,
              key: ticket.dir + ticket.key
            }
            this.$message.success('获取签名成功!')
          } else {
            this.$message.error('获取签名失败!')
          }
        }).catch(() => {
          this.$message.error('获取签名失败!')
        })
      },
      // 检查是否有签名
      checkHasTicket () {
        if (this.targetHost === '') {
          this.$message.error('上传图片前请先获取签名!')
          return false
        }
        return true
      },
      beforeUpload (file) {
        // 检查是否有签名
        if (!this.checkHasTicket()) {
          return false
        }
        // 判断图片类型
        if (!this.checkFileType(file)) {
          return false
        }
        // 判断图片大小
        if (!this.limitFileSize(file, 100)) {
          return false
        }
      },
      // 判断文件大小是否在 size(单位kb) 以内
      limitFileSize (file, size) {
        if (Math.round(file.size / 1024) <= size) {
          return true
        } else {
          this.$message.error('图片大小需在 100kb 以内!')
          return false
        }
      },
      // 判断文件类型
      checkFileType (file) {
        let allowedSuffix = ['jpg', 'png']
        let filename = file.name
        let lastSpotIndex = filename.lastIndexOf('.')
        let suffix = filename.substring(lastSpotIndex + 1)
        if (allowedSuffix.includes(suffix)) {
          return true
        } else {
          this.$message.error('只能上传 jpg 和 png 类型图片!')
          return false
        }
      },
      onProgress () {
        this.$message.info('正在上传图片...')
      },
      onError () {
        this.$message.error('图片上传失败!')
        this.clearTicket()
      },
      onSuccess () {
        this.$message.success('图片上传成功!')
        this.pictureIds += this.pictureIds === '' ? this.pictureId : ';' + this.pictureId
        this.clearTicket()
      },
      clearTicket () {
        this.targetHost = ''
        this.ticket = {}
        this.pictureId = ''
      }

    }
  }
</script>

<style scoped>

</style>
